<template>
  <div class="main-box">
    <div class="header">
      <input type="button" class="btn1" @click="switchbtn" value="柱状图" style="cursor: pointer">
      <button class="btn2" @click="switchbtn">环形图</button>
    </div>
    <div class="charts" id="column" v-show="isShow"></div>
    <div class="charts" id="pie" v-show="!isShow"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "HelloWorld",
  data() {
    return {
      isShow: true,
    };
  },
  mounted() {
    let Chart1 = echarts.init(document.getElementById("column"));
    Chart1.setOption({
      title: {
        text: "手机价格一览",
      },
      tooltip: {},
      xAxis: {
        data: ["iphone", "huawei", "oppo", "vivo"],
      },
      color: [
            
            "#759aa0",
            "#e69d87",
            "#8dc1a9",
            "#ea7e53",
            "#eedd78",
            "#73a373",
            "#73b9bc",
            "#7289ab",
            "#91ca8c",
            "#f49f42",
          ],
      yAxis: {},
      series: [
        {
          
          type: "bar",
          data: [9000, 8000, 7000, 6000],
        },
      ],
    });
    let Chart2 = echarts.init(document.getElementById("pie"));
    Chart2.setOption({
      title: {
        text: "手机销量份额",
        left: "center",
        top: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      series: [
        {
          type: "pie",
          data: [
            {
              value: 8,
              name: "iphone",
            },
            {
              value: 5,
              name: "huawei",
            },
            {
              value: 2,
              name: "oppo",
            },
            {
              value: 5,
              name: 'vivo'
            }
          ],
          radius: ["30%", "50%"],
        },
      ],
    });
  },
  methods: {
    switchbtn() {
      this.isShow = !this.isShow
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.charts {
  width: 400px;
  height: 400px;
}
.main-box {
  margin: 0 auto;
  text-align: center;
}
.charts {
  margin: 0 auto;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin: 0 auto;
  height: 100px;
}
.btn1 {
  background-color: #409eff; /* Green */
  border: 1px;
  color: #fff;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 24px;
  border-radius: 8px;
  height: 70px;
}
.btn1:focus {
  color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
}
.btn2 {
  background-color: #409eff; 
  border: 1px;
  color: #fff;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 24px;
  border-radius: 8px;
  height: 70px;
  cursor: pointer
}
.btn2:focus {
  color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
}
</style>
